<template>
    <div class="button_box">
        <el-scrollbar>
            <div class="scrollbar_content">
                <span
                    v-for="item in WorkflowList"
                    :key="item.id"
                    :class="['btn', formData.workflow_id == item.id ? 'active btn' : '']"
                    @click="onWorkflowChange(item)"
                    >{{ item.name }}</span
                >
            </div>
        </el-scrollbar>
    </div>
    <div class="search_box">
        <el-form :inline="true" :model="formData" label-width="auto">
            <div class="item_box">
                <el-form-item label="商机名称">
                    <el-input v-model="formData.name" placeholder="请输入商机编号 | 名称" />
                </el-form-item>
                <el-form-item label="商机阶段">
                    <el-select v-model="formData.stage_id" placeholder="请选择商机阶段">
                        <el-option v-for="item in processSelect" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="商机金额">
                    <div class="amount">
                        ￥
                        <template v-if="formData.amount[0]">
                            <el-input-number
                                v-model="formData.amount[0]"
                                :max="formData.amount[1] ? formData.amount[1] : 99999999"
                                :controls="false"
                                :precision="2"
                                :step="0.1" />
                            —
                            <el-input-number
                                v-model="formData.amount[1]"
                                :min="formData.amount[0] ? formData.amount[0] : 1"
                                :controls="false"
                                :precision="2"
                                :step="0.1" />
                        </template>
                        <template v-else>
                            <el-input-number
                                v-model="formData.amount[0]"
                                :max="formData.amount[1] ? formData.amount[1] : 99999999"
                                :controls="false"
                                :precision="2"
                                :step="0.1" />
                            —
                            <el-input-number
                                v-model="formData.amount[1]"
                                :min="formData.amount[0] ? formData.amount[0] : 1"
                                :controls="false"
                                :precision="2"
                                :step="0.1" />
                        </template>
                    </div>
                </el-form-item>
                <el-form-item label="创建时间">
                    <!-- <el-date-picker v-model="formData.created_at"  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" /> -->
                    <el-date-picker
                        v-model="formData.created_at"
                        :editable="false"
                        prefix-icon="Calendar"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        type="daterange"
                        range-separator="—"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="onTime" />
                </el-form-item>
                <el-form-item label="预计赢单时间">
                    <el-date-picker
                        v-model="formData.predict_time"
                        prefix-icon="Calendar"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        type="datetime"
                        placeholder="选择日期"
                        @change="onTime" />
                </el-form-item>
                <el-form-item label="赢单时间">
                    <el-date-picker
                        v-model="formData.actual_time"
                        prefix-icon="Calendar"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        type="datetime"
                        placeholder="选择日期"
                        @change="onTime" />
                </el-form-item>
                <el-form-item label="归属员工">
                    <el-select
                        v-model="formData.belong_uid"
                        placeholder="请选择归属员工"
                        multiple
                        popper-class="zw-hide_select_option"
                        @click="openDepart('BELONG_UID')"
                        @remove-tag="v => changeDepart(v, 'BELONG_UID')">
                        <el-option v-for="item in belongUidList" :key="item.id" :label="item.name" :value="item.id">{{
                            item.name
                        }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="协助员工">
                    <el-select
                        v-model="formData.assist_ids"
                        placeholder="请选择协助员工"
                        multiple
                        popper-class="zw-hide_select_option"
                        @click="openDepart('ASSIST_IDS')"
                        @remove-tag="v => changeDepart(v, 'ASSIST_IDS')">
                        <el-option v-for="item in assistIdsList" :key="item.id" :label="item.name" :value="item.id">{{
                            item.name
                        }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户信息">
                    <el-input v-model="formData.cust_info" placeholder="请输入客户名称|手机号搜索" />
                </el-form-item>
                <div></div>
                <div></div>
                <el-form-item>
                    <div class="btn_box">
                        <el-button type="primary" @click="getList">查询</el-button>
                        <el-button @click="onReset">清空</el-button>
                    </div>
                </el-form-item>
            </div>
        </el-form>
    </div>
    <div class="funbtn_box">
        <div class="left">
            <span class="menu_l" @click="onExpand"> </span>
            <span class="border_btn"></span>
            <span class="menu_l menu_r"></span>
            <el-checkbox v-model="formData.is_overdue" :true-label="1" :false-label="2" @change="getList"
                >逾期商机</el-checkbox
            >
            <el-checkbox v-model="formData.is_mine" :true-label="1" :false-label="2" @change="getList"
                >仅归属为自己的</el-checkbox
            >
            <el-checkbox v-model="formData.is_assist" :true-label="1" :false-label="2" @change="getList"
                >自己协助的</el-checkbox
            >
        </div>
        <div>
            <el-button type="primary" @click="onCreateRoute">新建商机</el-button>
        </div>
    </div>
    <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
</template>

<script setup lang="ts">
import ZWDepart from '@/components/ZWDepart.vue';
import { getSetionId } from '@/utils/utils';
import bus from '@/utils/bus';
import { getProcessSelect, businessWorkflowList, getWorkflowSelect } from '@/api/salesleads/salesmanagement/business';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { withDefaults, defineEmits, defineProps } from 'vue';
const emit = defineEmits(['submit']);
const router = useRouter();
const formData = ref<any>({
    workflow_id: '', //商机流程ID
    name: '', //商机名称
    stage_id: '', //商机流程阶段ID
    amount: [void 0, void 0], //商机金额
    predict_time: '', //预计赢单日期
    actual_time: '', //实际赢单日期
    belong_uid: [], //归属员工
    assist_ids: [], //协助员工
    cust_info: '', //主客户
    created_at: [], //创建时间
    is_overdue: 2, //是否逾期 1是 2否
    is_mine: 2, //是否仅归属自己的 1是 2否
    is_assist: 2 //是否自己协助的 1是 2否
});
const onTime = (v: any) => {
    if (!v) {
        formData.value.predict_time || (formData.value.predict_time = '');
        formData.value.actual_time || (formData.value.actual_time = '');
        formData.value.created_at || (formData.value.created_at = []);
    }
};
const getList = () => {
    const params = {
        ...formData.value
    };
    params.predict_time || (params.predict_time = '');
    params.actual_time || (params.actual_time = '');
    params.created_at || (params.created_at = []);
    params.amount[0] || (params.amount = []);
    params.amount[1] || (params.amount = []);
    params.belong_uid[0] || (params.belong_uid = '');
    params.belong_uid[0] && (params.belong_uid = params.belong_uid[0]);
    ongetProcessSelect(formData.value.workflow_id);
    businessWorkflowList(params).then((res: any) => {
        emit('submit', res);
    });
};
// 流程阶段-下拉框
const processSelect: any = ref([]);
const ongetProcessSelect = (workflow_id: any) => {
    getProcessSelect({ workflow_id }).then((res: any) => {
        processSelect.value = res;
    });
};
// 流程列表-tab
const WorkflowList = ref([]);
const onWorkflowList = () => {
    getWorkflowSelect().then((res: any) => {
        WorkflowList.value = res;
        if (WorkflowList.value.length) {
            formData.value.workflow_id = WorkflowList.value[0].id;
            getList();
            ongetProcessSelect(formData.value.workflow_id);
        }
    });
};
const onWorkflowChange = (item: any) => {
    formData.value = {
        workflow_id: item.id, //商机流程ID
        name: '', //商机名称
        stage_id: '', //商机流程阶段ID
        amount: [void 0, void 0], //商机金额
        predict_time: '',
        actual_time: '',
        belong_uid: [],
        assist_ids: [],
        cust_info: '',
        created_at: [],
        is_overdue: 2, //是否逾期 1是 2否
        is_mine: 2, //是否仅归属自己的 1是 2否
        is_assist: 2 //是否自己协助的 1是 2否
    };
    getList();
};
// 选择员工
const belongUidList: any = ref([]);
const assistIdsList: any = ref([]);
const DepartRef = ref<any>(); // 部门弹框类型
const openType = ref('');
const openDepart = (type: string) => {
    switch (type) {
        case 'BELONG_UID':
            DepartRef.value.multiple = false;
            DepartRef.value.selectedMember = [...belongUidList.value];
            break;
        case 'ASSIST_IDS':
            DepartRef.value.multiple = true;
            DepartRef.value.selectedMember = [...assistIdsList.value];
            break;
    }
    openType.value = type;
    DepartRef.value.departVisble = true;
};
// 获取部门成员
const getDepart = (res: any) => {
    switch (openType.value) {
        case 'BELONG_UID':
            belongUidList.value = res;
            formData.value.belong_uid = getSetionId('id', belongUidList.value);
            break;
        case 'ASSIST_IDS':
            assistIdsList.value = res;
            formData.value.assist_ids = getSetionId('id', assistIdsList.value);
            return;
    }
};
// 员工移除
const changeDepart = (tag: any, type?: string) => {
    switch (type) {
        case 'BELONG_UID':
            belongUidList.value = belongUidList.value.filter((item: any) => item.id !== tag);
            formData.value.belong_uid = [];
            break;
        case 'ASSIST_IDS':
            assistIdsList.value = assistIdsList.value.filter((item: any) => item.id !== tag);
            formData.value.assist_ids = getSetionId('id', assistIdsList.value);
            break;
    }
    DepartRef.value.removeItem({ id: tag });
};
// 清空
const onReset = () => {
    formData.value = {
        workflow_id: formData.value.workflow_id, //商机流程ID
        name: '', //商机名称
        stage_id: '', //商机流程阶段ID
        amount: [void 0, void 0], //商机金额
        predict_time: '',
        actual_time: '',
        belong_uid: [],
        assist_ids: [],
        cust_info: '',
        created_at: [],
        is_overdue: formData.value.is_overdue,
        is_mine: formData.value.is_mine,
        is_assist: formData.value.is_assist
    };
    getList();
};
// 切换页面
const onExpand = () => {
    bus.emit('EXPAND', 'EXPAND');
};
const onCreateRoute = () => {
    router.push('/salesleads/salesmanagement/business/create');
};
onMounted(() => {
    onWorkflowList();
});
</script>

<style lang="scss" scoped>
.button_box {
    .active {
        background-color: #fff1ed !important;
        color: #ff6b00;
    }

    .scrollbar_content {
        white-space: nowrap; /* 强制不换行 */
        padding-bottom: 16px;
    }

    .btn {
        padding: 11px;
        line-height: 41px;
        background-color: #f9f9f9;
        margin-right: 15px;
        margin-bottom: 16px;
        cursor: pointer;

        &:hover {
            background-color: #fff1ed;
            color: #ff6b00;
        }
    }

    .postion {
        position: relative;

        .badeg {
            position: absolute;
            top: 3px;
            right: -5px;
            width: 16px;
            height: 16px;
            display: grid;
            place-content: center;
            border-radius: 50%;
            border: 1px solid #ff6b00;
            font-size: 10px;
            color: #ff6b00;
        }
    }
}

.search_box {
    padding: 16px;
    margin-bottom: 16px;
    background-color: #f9f9f9;

    .item_box {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        grid-gap: 20px;

        .el-form-item {
            :deep(.el-input__inner) {
                width: 100%;
            }

            margin: 0;

            .el-select {
                width: 100%;
            }

            .amount {
                display: grid;
                grid-template-columns: 15px 1fr 15px 1fr;
                grid-gap: 10px;

                .el-input-number {
                    width: auto;
                }
            }

            :deep(.el-date-editor--datetime) {
                width: 100%;
            }

            .btn_box {
                text-align: right;
            }
        }
    }
}

.funbtn_box {
    display: flex;
    justify-content: space-between;
    padding-right: 16px;
    font-size: 30px;
    margin-bottom: 18px;

    .left {
        display: flex;
        align-items: center;

        .menu_l {
            width: 16px;
            height: 16px;
            margin-right: 20px;
            cursor: pointer;
            color: #969696;
            background: url('');
            background-size: 100%;
        }

        .menu_r {
            background: url('');
            background-size: 100%;
        }

        .border_btn {
            color: #d8d8d8;
            height: 20px;
            width: 1px;
            background: #d8d8d8;
            margin-right: 15px;
        }
    }
}

:deep(.el-date-editor) {
    width: auto;
}
</style>
